<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue模版语法的学习</title>
    <script src="../js/vue.js"></script>
</head>
<!-- Vue模板语法两大类
    插值语法:
        功能:用于解析标公体内容
        写法:((xxx)). xxx是js表达式,且可以直接读取到data中的所有属性。
    指令语法:
        功能:用于解析标签(包括:标签属性、标签休内容、绑定事件.....) .
        举例:v-bind:href=""xxx”或简写为:href="xxx""，xxx同样要*写js表达式,且可以直接读取到data中的所有属性。
        备注: Vue中有很多的指令，且形式都是: v-???，此处我们只是拿v-bind举个例子。
            v-bind绑定指令，就把下面的url当成一个js表达式去执行了
            v-bind: 还可以简写为:
 -->

<body>
    <div id="root">
        <!--
          插值语法一般用在标签体的值{{}}
          指令语法:用于解析标签(标签体,标签属性, 绑定事件)上，类似于v-bind
       -->
        <h1>插值语法</h1>
        <h3>你好, {{ name }} </h3>
        <hr />
        <h1>指令语法</h1>
        <!--v-bind绑定指令，就把下面的url当成一个js表达式去执行了-->
        <a v-bind:href="url.toUpperCase()" v-bind:x="x">百度一下</a> <!-- 转变为大写  toUpperCase() -->
        <!-- v-bind: 还可以简写为: -->
        <a :href="url_taiwan" :x="x">google 台湾</a>
        <p>学校: <a :href="school.url.toString()">{{ school.name }}</a> </p>
    </div>
    <script type="text/javascript">
        new Vue({
            el: "#root",
            data: {
                name: 'jack',
                url: 'https://www.baidu.com',
                x: 'test v-bind',
                url_taiwan: 'https://www.google.com.tw',
                school: {
                    name: '武汉科技大学',
                    url: 'https://www.wust.edu.cn/'
                }
            }
        })
    </script>
</body>

</html>